<template>

  <el-card shadow="never" class="card">
    <!-- 新增试题 -->
    <div class="add-button" style="margin-bottom:50px">
      <el-button size="small" style="float:right" type="success" icon="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button>
    </div>
    <!-- 搜索 -->
    <el-form label-width="80px" :model="qList">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科">
            <el-select v-model="qList.subjectID" style="width:100%" @change="handleSubject">
              <el-option v-for="item in subjectSimpleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="二级目录">
            <el-select v-model="qList.catalogID" style="width:100%">
              <el-option v-for="item in directorySimpleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签">
            <el-select v-model="qList.tags" style="width:100%">
              <el-option v-for="item in tagsSimpleList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字">
            <el-input v-model="qList.keyword" placeholder="根据题干搜索" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型">
            <el-select v-model="qList.questionType" style="width:100%">
              <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度">
            <el-select v-model="qList.difficulty" style="width:100%">
              <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向">
            <el-select v-model="qList.direction" style="width:100%">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人">
            <el-select v-model="qList.creatorID" style="width:100%">
              <el-option v-for="item in userList" :key="item.value" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注">
            <el-input v-model="qList.remarks" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称">
            <el-input v-model="qList.shortName" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="城市">
            <!-- 省份 -->
            <el-select v-model="qList.province" style="width: 48%; margin-right:4%;" @change="handleProvince">
              <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item" />
            </el-select>
            <!-- 城市 -->
            <el-select v-model="qList.city" style="width: 48%;">
              <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="width:100%">
          <el-form-item>
            <el-button style="float: right;" type="primary" @click="searchQuestionList">搜索</el-button>
            <el-button style="float: right;margin-right:10px;" @click="resetForm">清除</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据记录 -->
    <el-alert v-if="alertText !== ''" :title="alertText" type="info" :closable="false" show-icon class="dataCount" />
    <!-- end -->
    <!-- 数据列表 -->
    <el-table style="width: 100%" border :data="questionList" fit>
      <el-table-column align="center" label="试题编号" prop="number" />
      <el-table-column align="center" label="学科">
        <template #default="{row}">
          {{ formSubject(row.subjectID) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="目录">
        <template #default="{row}">
          {{ formDirectory(row.catalogID) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="题型">
        <template #default="{row}">
          {{ formQuestionType(row.questionType) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="题干" width="300px">
        <template #default="{row}">
          <p v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="录入时间" prop="addDate">
        <template #default="{row}">
          {{ formatTime(row) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="难度">
        <template #default="{row}">
          {{ formDifficulty(row.difficulty) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="录入人" prop="creator" />
      <!-- 操作按钮 -->
      <el-table-column align="center" label="操作" width="200">
        <template #default="{row}">
          <el-button type="primary" size="mini" title="预览" class="preview" @click="previewQusetion(row.id)">
            <i class="el-icon-view" />
          </el-button>
          <el-button type="primary" size="mini" title="修改" class="edit" @click="$router.push(`/questions/new?id=${row.id}`)">
            <i class="el-icon-edit" />
          </el-button>
          <el-button type="primary" size="mini" title="删除" class="del" @click="handleDel(row.id)">
            <i class="el-icon-delete" />
          </el-button>
          <el-button type="primary" size="mini" title="加入精选" class="addSelect" @click="addSelect1(row.id)">
            <i v-if="true" class="el-icon-check" />
            <i v-else class="el-icon-close" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- end -->
    <!-- 分页 -->
    <div class="pagination">
      <div class="pages">
        <el-pagination background :total="total" :page-sizes="[5,10,20,50]" :current-page="qList.page" :page-size="qList.pagesize" layout="prev, pager, next, sizes,jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </div>
    <!-- 预览弹窗-->
    <preview-question-y :detail-data="questionDetail" :is-show.sync="detailVisible" :directory-list="directoryList" />
  </el-card>
</template>

<script>
import { list, remove, choiceAdd, detail } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as dirSimple, list as dirList } from '@/api/hmmm/directorys'
import { simple as tagsSimple } from '@/api/hmmm/tags'
import { simple as userSimple } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import moment from 'moment'
import previewQuestionY from '../components/previewQuestionY.vue'
export default {
  name: 'QuestionsList',
  components: {
    previewQuestionY
  },
  data () {
    return {
      // 试题详情对象
      questionDetail: {},
      // 预览弹窗显示隐藏
      detailVisible: false,
      // 录入人简单列表
      userList: [],
      // 方向
      direction,
      // 题型
      questionType,
      // 难度
      difficulty,
      // 省市
      citySelect: {
        province: [],
        cityDate: []
      },
      // 标签简单列表
      tagsSimpleList: [],
      // 目录列表(用于表格)
      directoryList: [],
      // 目录简单列表(用于下拉框)
      directorySimpleList: [],
      // 学科简单列表
      subjectSimpleList: [],
      // 提示条数
      alertText: '',
      // 总条数
      total: 0,
      // 基础题库列表
      questionList: [],
      // 查询参数
      qList: {
        // 当前页数
        page: 1,
        // 页尺寸
        pagesize: 5,
        // 学科
        subjectID: null,
        // 难度
        difficulty: null,
        // 试题类型
        questionType: null,
        // 标签名称
        tags: null,
        // 企业所在省份
        province: null,
        // 企业所在城市
        city: null,
        // 关键字
        keyword: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 二级目录
        catalogID: null

      }
    }
  },
  created () {
    // 获取基础题库列表
    this.getQuestionList()
    // 获取学科列表
    this.getSubjectList()
    // 获取省
    this.getCityData()
    // 获取用户简单列表
    this.getUserList()
    // 获取全部目录列表
    this.getDirectoryList()
  },
  methods: {
    // 预览
    async previewQusetion (id) {
      const ret = await detail({ id: id })
      // console.log(ret)
      this.questionDetail = ret.data
      this.detailVisible = true
    },
    // 加入精选
    async addSelect1 (id) {
      const ret = await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
      }).catch(err => err)
      if (ret === 'cancel') return this.$message('已取消')
      try {
        await choiceAdd({ id: id, choiceState: 1 })
        // 加入精选成功
        // 提示加入精选题库成功
        this.$message.success('加入精选题库成功！')
        // 跳转到精选题库
        this.$router.push('/questions/choice')
      } catch (error) {
        this.$message.error('加入精选失败')
      }
    },
    // 筛选
    searchQuestionList () {
      this.qList.page = 1
      this.getQuestionList(this.qList)
    },
    // 重置
    resetForm () {
      this.qList = this.$options.data().qList
      this.getQuestionList(this.qList)
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 删除基础题库
    async handleDel (data) {
      const ret = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        type: 'warning'
      }).catch(err => err)
      if (ret === 'cancel') return this.$message('已取消')
      try {
        await remove({ id: data })
        this.$message.success('删除成功')
        await this.getQuestionList()
        if (this.getQuestionList.length === 0 && this.qList.page > 1) {
          this.qList.page--
          this.getQuestionList()
        }
      } catch {
        this.$message.error('删除基础题库列表失败')
      }
    },
    // 每页条数发生变化的时候
    handleSizeChange (val) {
      this.qList.pagesize = val
      this.getQuestionList()
    },
    // 页码发生变化的时候
    handleCurrentChange (val) {
      this.qList.page = val
      this.getQuestionList()
    },
    // 格式化时间
    formatTime (row) {
      return moment(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 格式化难度
    formDifficulty (df) {
      const info = this.difficulty.find(item => Number(item.value) === Number(df))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化题型
    formQuestionType (qt) {
      const info = this.questionType.find(item => Number(item.value) === Number(qt))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化学科
    formSubject (sj) {
      const info = this.subjectSimpleList.find(item => Number(item.value) === Number(sj))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化目录
    formDirectory (dt) {
      const info = this.directoryList.find(item => Number(item.id) === Number(dt))
      if (info) {
        return info.directoryName
      } else {
        return ''
      }
    },
    // 监听学科下拉框选中
    async handleSubject (e) {
      // console.log(e)
      // 获取目录列表
      const ret = await dirSimple({ subjectID: e })
      // console.log(ret)
      this.directorySimpleList = ret.data
      const ret1 = await tagsSimple({ subjectID: e })
      this.tagsSimpleList = ret1.data
      // console.log(ret1)
    },
    // 获取学科简单列表
    async getSubjectList () {
      const ret = await simple()
      if (ret.status === 200) {
        this.subjectSimpleList = ret.data
      }
    },
    // 获取目录列表
    async getDirectoryList () {
      const ret = await dirList({ page: 1, pagesize: 10000 })
      this.directoryList = ret.data.items
      // console.log(ret)
    },
    // 获取基础题库列表
    async getQuestionList () {
      try {
        const ret = await list(this.qList)
        // console.log(ret)
        if (ret.status === 200) {
          // 获取基础题库列表成功
          this.questionList = ret.data.items
          this.total = ret.data.counts
          this.alertText = `数据一共${this.total}条`
          // console.log(this.questionList, this.total)
        } else {
          this.$message.error(this.message)
        }
      } catch {
        this.$message.error('获取基础题库列表失败')
      }
    },
    // 获取用户简单列表
    async getUserList () {
      const ret = await userSimple()
      // console.log(ret)
      this.userList = ret.data
    }
  }
}
</script>

<style scoped lang='scss'>
.card {
  margin: 10px 10px 0;
}
.pagination {
  margin-top: 10px;
  float: right;
}
.dataCount {
  margin-bottom: 15px;
}
.preview {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
  border-radius: 50%;
  padding: 9px;
}
.edit {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  border-radius: 50%;
  padding: 9px;
}
.del {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  border-radius: 50%;
  padding: 9px;
}
.addSelect {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
  border-radius: 50%;
  padding: 9px;
}
</style>
